<template>
    <div class="other-service-container">
        <p class="title">其他服务</p>

        <div class="content-wrapper">
            <div class="button-wrapper" @click="ticket">
                <span class="image ticket"></span>
                <span class="content">
                    <p class="title">文本报修</p>
                    <p class="label">原微信文本服务报修</p>
                </span>
                <!-- <span class="icon"></span> -->
                <van-icon name="arrow" class="icon" color="#D2D2D2" size="17" />
            </div>
            <div class="button-wrapper" @click="video">
                <span class="image video"></span>
                <span class="content">
                    <p class="title">设备视频</p>
                    <p class="label">操作及维护视频</p>
                </span>
                <!-- <span class="icon"></span> -->
                <van-icon name="arrow" class="icon" color="#D2D2D2" size="17" />
            </div>
            <div class="button-wrapper" @click="query">
                <span class="image query"></span>
                <span class="content">
                    <p class="title">靶值查询</p>
                    <p class="label">质控物及校准物靶值查询</p>
                </span>
                <!-- <span class="icon"></span> -->
                <van-icon name="arrow" class="icon" color="#D2D2D2" size="17" />
            </div>
            <div style="width: 100%">
                <a href="tel:4007005652" class="button-wrapper">
                    <span class="image hotline"></span>
                    <span class="content">
                        <p class="title">服务热线</p>
                        <p class="label">迈瑞24小时人工服务热线</p>
                    </span>
                    <!-- <span class="icon"></span> -->
                    <van-icon
                        name="arrow"
                        class="icon"
                        color="#D2D2D2"
                        size="17"
                    />
                </a>
            </div>
            <div class="button-wrapper" @click="gotoCode">
                <span class="image-data data"></span>
                <!-- <img
                    src="../../assets/img/dataUpload.png"
                    style="width: 36px; height: 36px"
                /> -->
                <span class="content">
                    <p class="title">数据上传</p>
                    <p class="label">仪器信息采集及上传</p>
                </span>
                <van-icon name="arrow" class="icon" color="#D2D2D2" size="17" />
            </div>
        </div>
    </div>
</template>

<script>
import { navigateTo, isInWechatMP } from "../../lib/util";
export default {
    components: {},
    props: {},
    data() {
        return {
            mid: "",
        };
    },
    created() {},
    mounted() {
        this.mid = localStorage.getItem("mindray-mid") || "";
    },
    methods: {
        ticket() {
            if (isInWechatMP()) {
                // /pages/cscwork/index
                navigateTo("/pages/cscwork/index?mid=" + this.mid);
            } else {
                // https://service.mindray.com/csc/navigation.html?v=20210622&rv=Clients/Work/Workitem.html?mid=TT-0C001010
                const url =
                    "https://service.mindray.com/csc/navigation.html?v=20210622&rv=Clients/Work/Workitem.html?mid=" +
                    this.mid;
                window.open(url, "_blank");
            }
        },
        video() {
            if (isInWechatMP()) {
                navigateTo("/pages/cscvideo/index");
            } else {
                // https://service.mindray.com/cscvideo/
                const url = "https://service.mindray.com/cscvideo/";
                window.open(url, "_blank");
            }
        },
        query() {
            if (isInWechatMP()) {
                navigateTo("/pages/datasearch/index");
            } else {
                // https://service.mindray.com/mcs.datasearch/clients/TargetValue.html?v=20200508
                const url =
                    "https://service.mindray.com/mcs.datasearch/clients/TargetValue.html?v=20200508";
                window.open(url, "_blank");
            }
        },
        gotoCode() {
            if (isInWechatMP()) {
                navigateTo("/pages/qrCode/index");
            } else {
                this.$router.push("/qRCode");
            }
        },
    },
};
</script>

<style lang="less" scoped>
.other-service-container {
    width: 100%;
    height: 100%;
    padding: 20px 20px 46px 20px;
    box-sizing: border-box;

    .title {
        text-align: left;
        font-size: 15px;
        font-weight: bold;
        color: #000000;
        line-height: 21px;
    }

    .content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .button-wrapper {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 62px;
            background: #ffffff;
            box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
            border-radius: 12px;
            width: 100%;
            box-sizing: border-box;
            margin: 9px 0;
            padding: 14px;
            padding: 10px 20px 12px 14px;

            .image {
                display: inline-block;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }
            .ticket {
                background-image: url("../../assets/img/ticket.png");
            }
            .hotline {
                background-image: url("../../assets/img/hotline.png");
            }
            .video {
                background-image: url("../../assets/img/video.png");
            }
            .query {
                background-image: url("../../assets/img/query.png");
            }
            .image-data {
                display: inline-block;
                width: 36px;
                height: 36px;
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }
            .data {
                background-image: url("../../assets/img/zsyqm.png");
            }

            .content {
                margin-left: 17px;

                .title {
                    font-size: 14px;
                    font-weight: bold;
                    color: #242728;
                    line-height: 20px;
                    margin: 1px 0;
                }
                .label {
                    font-size: 12px;
                    font-weight: 500;
                    color: #b6b6b6;
                    line-height: 17px;
                    margin: 1px 0;
                }
            }
            .icon {
                width: 9px;
                height: 17px;
                display: inline-block;
                // background-image: url("../../assets/img/right-gray.png");
                // background-size: 9px 17px;
                // background-position: center;
                // background-repeat: no-repeat;
                margin-left: auto;
            }
        }
    }
}
</style>
